<template>
    <div>
        <!-- 地区分类 -->
    </div>
  <div>
      <!-- 地区分类 -->
      <p style="margin-top:20px;margin-left:10px;"><a-button type="primary" size="small" @click="()=>{visible1=true}">添加</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" @click="editall">保存</a-button></p>
      <a-table  :columns="columns" :data-source="data" bordered size="small" :customHeaderRow="customHeaderRow" :customRow="customRow" :pagination="false">
          <template #fname="{record}">
              <input type="text" v-model="record.name" class="input1" @change="ee(record)">(ID:{{record.id}})
          </template>
          <template #sort="{record}">
            <input type="text" v-model="record.sort_id" class="input1" @change="ee(record)">
          </template>
          <template #cao="{record}">
            <a-button size="small" @click="add(record)" v-if="record.level!='3'">在此类下添加子类</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" @click="eidt(record.id)">编辑</a-button>&nbsp;&nbsp;<a-button type="primary" size="small" danger @click="open(record.id)">删除</a-button>
          </template>
      </a-table>
  </div>
  <a-modal v-model:visible="visible1" title="添加" :footer="null">
    <a-form :model="addform" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
      <a-form-item label="所属分类">
        <el-cascader v-model="addform.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="addform.name" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="addform.sort_id"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
        <a-button style="margin-left: 10px">取消</a-button>
        <a-button type="primary" @click="onSubmit" class="but">添加</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="visible2" title="添加分类" :footer="null">
    <a-form :model="addform1" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
      <a-form-item label="所属分类">
        <el-cascader v-model="addform1.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="addform1.name" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="addform1.sort_id"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }" >
        <a-button style="margin-left: 10px">取消</a-button>
        <a-button type="primary" @click="onSubmit1" class="but">添加</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-modal v-model:visible="visible3" title="编辑" :footer="null">
    <a-form :model="eidtform" :label-col="{span:4}" :wrapper-col="{span:24}" :rules="rules">
      <a-form-item label="所属分类">
        <el-cascader v-model="eidtform.pid" placeholder="顶级" :options="data1" :props="{checkStrictly: true,label:'name',value:'id',children:'children'}" clearable :show-all-levels=false />
      </a-form-item>
      <a-form-item label="名称" name="name">
        <a-input v-model:value="eidtform.name" />
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="eidtform.sort_id"/>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }" >
        <a-button style="margin-left: 10px">取消</a-button>
        <a-button type="primary" @click="onSubmit2" class="but">编辑</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { message,Button } from 'ant-design-vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import {onMounted, reactive, ref,h} from 'vue'
import { useStore } from "vuex";
import {RightOutlined,DownOutlined} from '@ant-design/icons-vue'
import Icon from '@ant-design/icons-vue';
const customHeaderRow=()=> {
     return {
          style: {
              'font-size' : '10px'
          },
      }
  }
const customRow=() =>{
    return {
        style: {
            'font-size' : '10px'
        },
    }
}
// const customExpandIcon=(props:any)=>{
//   let { expanded, onExpand, record } = props;
//         // if (record) {
//         //     return h('div', {
//         //         class: `ant-table-row-expand-icon ${expanded ? `RightOutlined` : 'DownOutlined'}`,
//         //         attrs: {
//         //             role: 'button'
//         //         },
//         //         on: {
//         //             click: (event: Event) => {
//         //                 onExpand(record, event);
//         //             }
//         //         },
//         //     });
//         // }
// }
const columns = [
{ title: '分类名称', key: 'fname',slots: { customRender: 'fname' },width:500  },
{ title: '别名', dataIndex: "spell", key: 'alias',width:200 },
{ title: '排序', key: 'sort', slots: { customRender: 'sort' } },
{ title: '操作', key: 'cao',slots:{customRender:'cao'} },
];
const rules = {
    name: [
      { required: true, message: '请输入地区名称', trigger: 'blur' },
    ]}
let addform=reactive({
name:'',
sort_id:'0',
pid:'',
level:'0'
})
let addform1=reactive({
name:'',
sort_id:'0',
pid:'',
level:'0'
})

let store=useStore()
let visible1=ref(false)
let visible2=ref(false)
let visible3=ref(false)
let delid=ref('')
let data=ref([])
let data1=ref([])
let eidtform=reactive({
name:'',
sort_id:'',
pid:'',
level:'',
id:''
})
const eidt=(id:any)=>{
store.dispatch("user/areaone",id)
    .then(async(e: any) => {
      console.log(e.data.list[0]);
      eidtform.name=e.data.list[0].name
      eidtform.sort_id=e.data.list[0].sort_id
      eidtform.pid=e.data.list[0].pid
      eidtform.level=e.data.list[0].level
      eidtform.id=e.data.list[0].id
    })
    .catch((err) => {
      // message.error(err.message || err.data.message)
    });
visible3.value=true

}
const add=(re:any)=>{
addform1.pid=re.id
addform1.level=`${parseInt(re.level)+1}`
visible2.value=true
}
const onSubmit1=()=>{
store.dispatch("user/areaadd",addform1)
    .then(async(e: any) => {
      await getlist()
    })
    .catch((err) => {
      // message.error(err.message || err.data.message)
    });
    addform1.name=""
    visible2.value=false
}
const onSubmit2=()=>{
store.dispatch("user/areaedit",eidtform)
    .then(async(e: any) => {
      await getlist()
    })
    .catch((err) => {
      // message.error(err.message || err.data.message)
    });
    visible3.value=false
}
const getlist=async()=>{
store
  .dispatch("user/arealist")
  .then((e: any) => {
    // console.log(1233);
    data.value =e.list
  })
  .catch((err) => {
    // message.error(err.message || err.data.message);
    
  });
}
const getlist1=async()=>{
store
  .dispatch("user/arealist")
  .then((e: any) => {
    // console.log(1233);
    for(let i=0;i<e.list.length;i++){
      if(e.list[i].children){
        for(let o=0;o<e.list[i].children.length;o++){
          if(e.list[i].children[o].children){
            delete e.list[i].children[o]["children"]
          }
        }
      }
      
    }
    data1.value =e.list
    console.log(data1.value);
    
  })
  .catch((err) => {
    // message.error(err.message || err.data.message);
    
  });
}
const open = (id:any) => {
delid.value=id
ElMessageBox.confirm(
  '将永久删除是否确定?',
  '警告',
  {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }
)
  .then(() => {
    store.dispatch("user/areadel",delid.value)
    .then(async(e: any) => {
      await getlist()
    })
    .catch((err) => {
      // message.error(err.message || err.data.message);
      ElMessage({
        type: 'info',
        message: '删除关闭',
      })
    });
    ElMessage({
      type: 'success',
      message: '删除完毕',
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
      message: '删除关闭',
    })
  })
}
const onSubmit=()=>{
console.log(addform.pid);
if(addform.pid){
    if(addform.pid.length==1){
      addform.pid=addform.pid['0']
      addform.level="2"
    }else if(addform.pid.length==2){
      console.log(addform.pid);
      
      addform.pid=addform.pid['1']
      addform.level="3"
    }
}else{
  addform.pid='0'
  addform.level="1"
}
store.dispatch("user/areaadd",addform)
    .then(async(e: any) => {
      await getlist()
    })
    .catch((err) => {
      // message.error(err.message || err.data.message)
    });
addform.pid=''
addform.name=''
addform.sort_id='0'
visible1.value=false
}
const editlist=ref<any>([])
const ee=(record:any)=>{
let a={id:record.id,name:record.name,sort_id:record.sort_id}
editlist.value.push(a)
}
const editall=async()=>{
await editlist.value.forEach((item:any)=>{
  store.dispatch("user/areaedit",item)
    .then((e: any) => {
    })
    .catch((err) => {
      // message.error(err.message || err.data.message)
    });
})
await getlist()
message.success('保存成功')

}
onMounted(()=>{
getlist()
getlist1()
})
</script>

<style scoped>
.input1{
border: 0.2px solid grey;
padding-left: 10px;
border-radius: 2px;
}
.but{
/* display: flex; */
margin-left: 50px;
}
</style>